<template>
  <div class="app-container">
    <h2 class="text-center">{{ name }}</h2>

    <el-card style="margin-top: 20px">
      <div v-for="item in quList" :key="item.id" class="qu-content">
        <p style="margin: 10px; text-align:left; font-size: 18px">{{ item.index + 1 }}.{{ item.content }}</p>
        <div v-if="item.type < 2">
          <el-radio-group v-model="radioValues[item.id]">
            <el-radio v-for="an in item.choice" :key="an" :label="an">
              {{ an }}
            </el-radio>
          </el-radio-group>

          <el-row :gutter="24">

            <el-col :span="12">
              <div>
                <span style="color: #24da70">正确答案：</span>
              </div>
              <div>{{ item.answer.length>1?item.answer: item.answer[0] }}</div>
            </el-col>

            <el-col v-if="!item.answerList" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：未答
            </el-col>

            <el-col v-if="item.answerList && !item.isRight" :span="12" style="text-align: right" :style="`color: ${item.isRight}?#24da70:#ff0000`">
              答题结果： {{ item.answerList.length>1?item.answerList: item.answerList[0] }}
            </el-col>
          </el-row>

        </div>

        <div v-else>
          <el-row :gutter="24">
            <el-col :span="12">
              <div style="text-align:left">
                <span style="color: #24da70">正确答案：</span>
              </div>
              <div style="white-space: pre-wrap; text-align:left">{{ item.answer.length>1?item.answer: item.answer[0] }}</div>
            </el-col>

            <el-col :span="12">
              <div style="text-align:left">
                <span :style="`color: ${item.isRight?'#24da70':'#ff0000'}`">答题结果：</span>
              </div>
              <div v-if="item.answerList!=[]" style="white-space: pre-wrap; text-align:left">{{ item.answerList.length>1?item.answerList: item.answerList[0] }}</div>
              <div v-else style="white-space: pre-wrap; text-align:left">未答</div>
            </el-col>

          </el-row>
        </div>

      </div>

    </el-card>

    <el-button style="margin-top: 10px" type="info" @click="routeBack">返回</el-button>

  </div>
</template>

<script>

import request from '@/request'

export default {
  name: 'ExamResult',
  data() {
    return {
      // 试卷ID
      name: '',
      quList: [],
      radioValues: {},
      textValues: {},
      myRadio: {},
      myMulti: {}
    }
  },
  created() {
    const id = this.$route.params.id
    if (typeof id !== 'undefined') {
      this.fetchData(id)
      this.name = this.$route.params.name
    }
  },
  methods: {

    async fetchData(id) {
      const params = { id: id }
      var response = await request({
        method: 'post', url: '/exam/query',
        data: { 
          current: 1, size: 1,
          params: { id }
        }
      })

      var answerList = JSON.parse(response.data.data.records[0].answer)

      response = await request({
        method: 'post', url: '/question/query/result',
        data: Object.keys(answerList)
      })

      var quList = response.data.data.sort((a,b)=>{ a.type - b.type })
      var index = 0
      quList.map(qu=>{
        qu.index = index;
        qu.answerList = answerList[qu.id]
        qu.answer = JSON.parse(qu.answer)
        var sortedAnswerList = qu.answerList.sort()
        qu.isRight = qu.answer.sort().map((an,index)=>an==sortedAnswerList[index]).indexOf(false)<0
        index++
      })
      this.quList = quList
    },
    routeBack(){
      this.$router.push({name: 'ExamHistory'})
    }
  }
}
</script>

<style scoped>

  .qu-content{

    border-bottom: #eee 1px solid;
    padding-bottom: 10px;

  }

  .qu-content div{
    line-height: 30px;
  }

  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }

  .card-title{
    background: #eee;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
  }
  .card-line{
    padding-left: 10px
  }
  .card-line span {
    cursor: pointer;
    margin: 2px;
  }

</style>

